/*
 * @FilePath: 环境贴图.js
 * @Author: 杜芬
 * @Date: 2024-04-15 21:59:33
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-04-16 12:01:06
 * Copyright: 2024 xxxTech CO.,LTD. All Rights Reserved.
 * @Descripttion: 
*/
// 目标：环境贴图
// 作用：模拟物体对四周内容的反射效果
// 使用：
// 1. 使用 CubeTextureLoader （立方体纹理加载器）- 6 个面的图片，得到纹理对象
// 2. 设置给物体的 envMap 环境贴图属性
// 3. 借助 GUI 工具，修改物体材质的粗糙度和金属度观察效果
import {scene} from './utils/init.js'

import * as THREE from 'three'
import { Mesh } from 'three'


import * as dat from 'dat.gui'


function initBase() {
  // 1. 创建几何图形
  const geometry = new THREE.SphereGeometry(1, 32, 16)

  // 1. 使用 CubeTextureLoader （立方体纹理加载器）- 6 个面的图片，得到纹理对象
  const cubeTL = new THREE.CubeTextureLoader()
  const cubeTexture = cubeTL.setPath('image/sky/').load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])
  // texture.colorSpace = THREE.SRGBColorSpace
  // 2. 设置给物体的 envMap 环境贴图属性


    const material = new THREE.MeshStandardMaterial({
    envMap:cubeTexture,
    roughness:0,// 粗糙度0
    metalness:1  // 金属度

    })
    // 3. 借助 GUI 工具，修改物体材质的粗糙度和金属度观察效果
  const gui = new dat.GUI()
  gui.add(material, 'roughness', 0, 1, 0.1)
  gui.add(material, 'metalness', 0, 1, 0.1)


  // 天空盒子-scene 场景添加一个背景

  scene.background = cubeTexture

  // 4.生成物体加入到场景中
  const mesh = new THREE.Mesh(geometry, material)

  scene.add(mesh)
}


initBase()